<!-- pdf.vue -->

<template>
  <div id="container" :class="{ back: isShow }">
    <canvas id="the-canvas"></canvas>
    <!-- //添加关闭pdf功能 -->
    <span :class="{ close: isShow }" @click="closePdf">close</span>
    <p class="foot" v-if="pdfDoc">
      <Button class="left" @click="onPrevPage" v-if="pageNum > 1"
        >上一页</Button
      >
      <Button class="right" @click="onNextPage" v-if="pageNum < pdfDoc.numPages"
        >下一页</Button
      >
    </p>
  </div>
</template>

<script>
import PDFJS from "pdfjs-dist";
console.log(PDFJS);
// 获取屏幕 物理像素 / 设备独立像素dip 比例
var PIXEL_RATIO = (function () {
  var ctx = document.createElement("canvas").getContext("2d"),
    dpr = window.devicePixelRatio || 1,
    bsr =
      ctx.webkitBackingStorePixelRatio ||
      ctx.mozBackingStorePixelRatio ||
      ctx.msBackingStorePixelRatio ||
      ctx.oBackingStorePixelRatio ||
      ctx.backingStorePixelRatio ||
      1;

  return dpr / bsr;
})();

// ('pdfjs-dist/build/webpack/pdf.worker.bundle.js');
var PdfjsWorker = require("worker-loader!pdfjs-dist/build/pdf.worker.js");

// var PdfjsWorker = require('./pdf.worker.bundle.js');
PDFJS.GlobalWorkerOptions.workerPort = new PdfjsWorker();
// PDFJS.GlobalWorkerOptions.workerSrc = './pdf.worker.bundle.js'
export default {
  data() {
    return {
      isShow: false, // 通过该属性动态添加类，让pdf显示或隐藏
      pdfDoc: null, // 可以打印发现是一个对象，里面有页数信息等
      pageNum: 1,
      pageRendering: false,
      pageNumPending: null,
      scale: 0.9
    };
  },
  methods: {
    closePdf() {
      this.isShow = false;
    },
    showPDF(url) {
      console.log(url);

      this.isShow = true;
      let _this = this;

      PDFJS.getDocument({
        url: url,
        cMapUrl: "./pdfjs/web/cmaps",
        cMapPacked: true
      }).promise.then(function (pdf) {
        console.log(pdf, 22222);
        _this.pdfDoc = pdf;
        _this.renderPage(1);
      });
    },
    renderPage(num) {
      this.pageRendering = true;
      let _this = this;
      this.pdfDoc.getPage(num).then(function (page) {
        var viewport = page.getViewport({ scale: _this.scale });
        let canvas = document.getElementById("the-canvas");
        var context = canvas.getContext("2d");
        // canvas.height = viewport.height;
        // canvas.width = viewport.width; // Render PDF page into canvas context

        canvas.height = viewport.height * PIXEL_RATIO;
        canvas.width = viewport.width * PIXEL_RATIO;
        canvas.style.width = viewport.width + "px";
        canvas.style.height = viewport.height + "px";
        // canvasWrap.style.width = canvas.style.width;
        // canvasWrap.style.height = canvas.style.height;
        context.setTransform(PIXEL_RATIO, 0, 0, PIXEL_RATIO, 0, 0);

        var renderContext = {
          canvasContext: context,
          viewport: viewport
        };
        var renderTask = page.render(renderContext); // Wait for rendering to finish
        renderTask.promise.then(function () {
          _this.pageRendering = false;
          if (_this.pageNumPending !== null) {
            // New page rendering is pending
            this.renderPage(_this.pageNumPending);
            _this.pageNumPending = null;
          }
        });
      });
    },
    queueRenderPage(num) {
      if (this.pageRendering) {
        this.pageNumPending = num;
      } else {
        this.renderPage(num);
      }
    },
    onPrevPage() {
      if (this.pageNum <= 1) {
        return;
      }
      this.pageNum--;
      this.queueRenderPage(this.pageNum);
    },
    onNextPage() {
      if (this.pageNum >= this.pdfDoc.numPages) {
        return;
      }
      this.pageNum++;
      this.queueRenderPage(this.pageNum);
    }
  }
};
</script>

<style scoped="" type="text/css">
.back {
  background-color: rgba(0, 0, 0, 0.788);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  text-align: center;
  padding: 20px;
  z-index: 100;
  overflow: scroll;
  box-sizing: border-box;
}

.close {
  position: absolute;
  right: 20px;
  top: 20px;
  z-index: 200;
  color: #fff;
  cursor: pointer;
}

.foot {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translate(-50%, 0);
}
</style>
